<template>
  <div class="container">
    <div class="img-container">
      <img src="../../../static/fuel/today-price.png" alt="" />
    </div>
    <div class="price-container">
      <p class="today">{{ todayText }}</p>
      <div class="price-card">
        <van-field
          readonly
          clickable
          :value="stationName"
          placeholder="选择油站"
          @click="showPicker = true"
          right-icon="arrow-down"
        />
        <div class="price-table">
          <div class="price-table-item table-title-bgcolor">
            <div class="f1">
              <p>油品</p>
            </div>
            <div class="f1">
              <p>油站价</p>
            </div>
          </div>
          <div
            class="price-table-item"
            :style="{ backgroundColor: item.bgColor ? item.bgColor : '#fff' }"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="f1">
              <p>{{ item.oilName }}</p>
            </div>
            <div class="f1">
              <p>{{ item.oilStationPrice }}(元/L)</p>
            </div>
          </div>
        </div>
        <div class="address-container">
          <p>地址：{{ information.detailRegionData }}</p>
          <p>服务电话：{{ information.phone }}</p>
        </div>
      </div>
    </div>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import { Picker, Field, Popup } from "vant";
import Vue from "vue";
Vue.use(Picker);
Vue.use(Field);
Vue.use(Popup);
export default {
  data() {
    return {
      stationName: "",
      showPicker: false,
      columns: [],
      list: [],
      stationId: null,
      information: {
        detailRegionData: "",
        phone: ""
      },
      todayText: "",
      bgColorList: ["#f8fcff", "#f9ffff", "#fdfeff"]
    };
  },
  created() {
    this.initStationList();
  },
  methods: {
    getDate() {
      var date = new Date(); // 获取时间
      var year = date.getFullYear(); // 获取年
      var month = date.getMonth() + 1; // 获取月
      var strDate = date.getDate(); // 获取日
      this.todayText = `${year}-${this.getNum(month)}-${this.getNum(strDate)}`;
    },
    getNum(i) {
      return i < 10 ? "0" + i : i;
    },
    initStationList() {
      this.getDate();
      const infoData = this.$axios
        .$get("/appletSelectStationList", {
          params: {
            enterpriseId: this.enterpriseId
          }
        })
        .then(res => {
          console.log(res);
          if (res && res.data) {
            this.columns = res.data.stationList;
            this.columns.forEach(item => {
              item.text = item.stationName;
            });
            this.selectedStation(this.columns[0]);
          } else {
            this.columns = [];
          }
        });
    },
    onConfirm(value) {
      this.selectedStation(value);
    },
    selectedStation(value) {
      this.stationName = value.text;
      this.stationId = value.stationId;
      this.showPicker = false;
      if (value.oilList) {
        this.list = value.oilList;
        this.bgColorList.forEach((item, index) => {
          this.list[index].bgColor = item;
        });
      } else {
        this.list = [];
      }
      this.information.phone = value.phone ? value.phone : "";
      this.information.detailRegionData = value.detailRegionData
        ? value.detailRegionData
        : "";
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  background-color: #f4f8fa;
  display: flex;
  flex-direction: column;

  .img-container {
    width: 100%;
    // height: 2.5rem;
  }

  .price-container {
    box-sizing: border-box;
    width: 100%;
    height: 5rem;
    padding: 0 0.3rem;
    margin: 0.2rem 0;
    flex: 3;
    display: flex;
    flex-direction: column;

    .price-card {
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 0.2rem;
      width: 100%;
      flex: 3;
      padding: 0 0.2rem;
      display: flex;
      flex-direction: column;

      .price-table {
        flex: 3;
        margin: 0.2rem 0;
        border-radius: 20px;

        .price-table-item {
          display: flex;

          div {
            display: flex;
            justify-content: center;
            align-content: center;
          }
        }
      }
    }

    .today {
      margin-left: 0.1rem;
      color: #979797;
    }
  }

  .address-container {
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 0.1rem;
    padding: 0.2rem;
    flex: 1;
    padding: 0.3rem;
    color: #979797;
  }
}

.price-table .price-table-item:nth-child(1) {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.price-table .price-table-item:last-child {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

img {
  width: 100%;
  height: 100%;
}

.f1 {
  flex: 1;
}

.table-title-bgcolor {
  background-color: #f1f2fe;
}
</style>
